<template>
	<div class="container">
		<form @submit.prevent="submit" class="form-horizontal"><br/>
			<div class="form-group">
				<label for="QQ" class="col-xs-3 control-label"><span>*</span>QQ</label>
				<div class="col-xs-8">
					<input type="text" class="form-control" v-model="formData.QQ" name="QQ" id="QQ" required="required" placeholder="QQ是唯一的联系方式哦">
				</div>
			</div>
			
			<div class="form-group">
				<label for="nickName" class="col-xs-3 control-label"><span>*</span>CN</label>
				<div class="col-xs-8">
					<input type="text" class="form-control" v-model="formData.nickName" name="nickName" id="nickName" required="required"  placeholder="大家可以这样称呼你"/>
				</div>
			</div>
			
			<div class="form-group">
				<label for="sex" class="col-xs-3 control-label"><span>*</span>性别</label>
					<div class="col-xs-3">
						<label>
							<input type="radio" v-model="formData.sex" required="required" name="sex" value="0"> 男
						</label>
					</div>
					<div class="col-xs-3">
						<label>
							<input type="radio" v-model="formData.sex" required="required" name="sex" value="1"> 女
						</label>
					</div>
			</div>
			
			<div class="form-group">
				<label for="year" class="col-xs-3"><span>*</span>年级</label>
				<div class="col-xs-8">
					<select class="form-control" v-model="formData.year" required="required">
						<option v-for="item in curYear" :value="item">{{item}}届</option>
					</select>
				</div>
			</div>
			
			<div class="form-group">
				<label for="college" class="col-xs-3"><span>*</span>学院</label>
				<div class="col-xs-8">
					<select class="form-control" v-model="formData.college" required="required">
						<option  v-for="(item,index) in $store.state.colleges" :value="index">{{item}}</option>
					</select>
				</div>
			</div>
			
			<div class="form-group">
				<label for="major" class="col-xs-3">专业</label>
				<div class="col-xs-8">
					<input type="text" class="form-control" v-model="formData.major" name="major" id="major"/>
				</div>
			</div>
			
			<div class="form-group">
				<label for="department" class="col-xs-3"><span>*</span>部门</label>
				<div class="col-xs-8">
					<select class="form-control" v-model="formData.department" required="required">
						<option v-for="(item,index) in $store.state.departments" :value="index">{{item}}</option>
					</select>
				</div>
			</div>
			
			<div class="form-group">
				<label for="hobbies" class="col-xs-3">爱好</label>
				<div class="col-xs-8">
					<input type="text" class="form-control" v-model="formData.hobbies" name="hobbies" id="hobbies" placeholder="你喜欢的都可以告诉我们" />
				</div>
			</div>
			
			<div class="form-group">
				<label for="expect" class="col-xs-3">寄语</label>
				<div class="col-xs-8">
					<textarea type="text" class="form-control" style="resize: none;" v-model="formData.expect" name="expect" id="expect" placeholder="你期待的社团是什么样的呢" rows="3" />
				</div>
			</div>
		
			<input type="submit" class="btn btn-success col-xs-4 col-xs-offset-4" value="提交"/>
		</form>
	</div>
</template>

<script>
	import store from '../../store/index.js'
	export default {
		data(){
			return {
				formData:{
					QQ: '',
					nickName: '',
					password: '',
					sex: null,
					year: 0,
					college: 0,
					major: '',
					department: 0,
					hobbies: '',
					expect: ''
				},
				curYear:[]
			}
		},
		store,
		created() {
			let date = new Date
			let year = date.getFullYear()
			this.formData.year = year
			console.log(year + typeof year)
			// while(year > 2009){
			// 	this.curYear.push(year--)
			// }
			for(let i = 0;i < 4; i++){
					this.curYear.push(year--)
			}
		},
		methods:{
			submit(){
				console.log(this.formData)
				const xhr = new XMLHttpRequest()
				xhr.onload = () => {
					if(JSON.parse(xhr.responseText).error_code == 200){
						window.alert(JSON.parse(xhr.responseText).message)
						this.$router.push('/Join/Register')
					}else{
						this.autoLogin()
						this.$router.push('/Join/Intro')
					}

				}
				xhr.open('post','/register')
				xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
				xhr.send(
					"QQ="+this.formData.QQ
					+"&nickName="+this.formData.nickName
					+"&password="+this.formData.password
					+"&sex="+this.formData.sex
					+"&year="+this.formData.year
					+"&college="+this.formData.college
					+"&major="+this.formData.major
					+"&department="+this.formData.department
					+"&hobbies="+this.formData.hobbies
					+"&expect="+this.formData.expect
				)
			},
			autoLogin(){
				const xhr = new XMLHttpRequest()
				xhr.onload = () => {
					const user = JSON.parse(xhr.responseText)
					this.$store.commit('setUser',user)
					this.$store.state.user.account == '' ? this.$store.commit('setLoginState',false)  : this.$store.commit('setLoginState',true)
				}
				xhr.open('post','/autoLogin')
				xhr.send()
			}
		}
	}
</script>

<style scoped="scoped">
	.container{
		background: no-repeat ;
		background-size: 100%;
		background-image: url(../../assets/img/Register/asn.jpg);
		height: calc(100vh);
	}
	label{
		line-height: 34px;
		text-align: center;
	}
	span{
		color: #f00;
	}
	select{
		text-align: center;
		text-align-last: center;
	}
	
</style>
